<template>
  <div class="terminal-detail-fodder">
    <!-- <div class="terminal-detail-body-left-file"> -->

<!--    <div class="terminal-detail-fodder-header">
      <el-radio-group v-model="currentType" size="mini">
        <el-radio-button label="local">本地素材</el-radio-button>
        <el-radio-button label="remote">远程素材</el-radio-button>
      </el-radio-group>
    </div>-->
    <!-- <div class="terminal-detail-fodder-body"> -->
      <!-- <el-scrollbar style="height: 100%;"> -->
        <!-- <el-collapse v-model="activeNames"> -->
          <!-- <el-collapse-item v-for="(item, i) in list" :key="i" :title="item.label" :name="item.value"> -->
            <draggable
              v-model="list"
              forceFallback="true"
              :group="{name:'fodder',pull:'clone',put:'false'}"
              animation="0"
              :sort="false"
              touchStartThreshold="0px"
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
              @start="(e) => onStart(e, list)"
              @end="(e) => onEnd(e, list)"
              @move="(e) => onMove(e, list)"
            >
              <div class="item" data-index="j" v-for="(row, j) in list" :key="j">
                <div class="item_view">
                  <div class="item_type">{{row.mediaTypeName}}</div>
                  <img class="item_view-img" v-if="row.image" :src="row.image" fit="cover" />
                  <div class="item_name">{{row.media_name}}</div>
                </div>
              </div>
            </draggable>

<!--            <div class="item" v-for="(row, j) in item.list" :key="j">-->
<!--              <div-->
<!--                :draggable="true"-->
<!--                @dragstart="(ev) => {dragstartMethods(ev, item)}"-->
<!--              >-->
<!--                <div class="item_view">-->
<!--                  <el-image class="item_view-img" v-if="row.image" :src="row.image" fit="cover"></el-image>-->
<!--                </div>-->
<!--                <div class="item_name">{{row.media_name}}</div>-->
<!--              </div>-->
<!--            </div>-->

          <!-- </el-collapse-item> -->
        <!-- </el-collapse> -->
      <!-- </el-scrollbar> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      currentType: 'local',
      activeNames: '',
      moveCache: []
    }
  },
  methods: {
    dragstartMethods(ev, row) {
      console.log('start ---', row)
    },
    onStart (e, row) {
      this.moveCache = JSON.parse(JSON.stringify(row))
      document.body.style.setProperty('--fodder-bg-color', 'rgba(241, 151, 44, 0.10)')
    },
    onMove(e, list) {

    },
    onEnd (e, list) {
      e.preventDefault()
      document.body.style.setProperty('--fodder-bg-color', 'transparent')
      const { originalEvent, newIndex } = e
      if(e.to.dataset.actindex) {
        this.$emit('add', this.moveCache[e.oldIndex], e.to.dataset.actindex)
      } else {
        this.$emit('other', e)
      }
    },
  },
  mounted () {
    document.body.style.setProperty('--fodder-bg-color', 'transparent')
  },
}
</script>

<style scoped lang="scss">
  // .terminal-detail-body-left-file::-webkit-scrollbar {
  //   display: none;
  // }

  // .terminal-detail-body-left-file{
  //   height: 90%;
  //   overflow: auto;
  //   padding: 0 20px;

    .item {
      margin-top: 10px;

      .item_view {
        height: 135px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: hidden;

        .item_type {
          color: #fff;
          font-size: 10px;
          line-height: 16px;
          height: 16px;
          top: 10px;
          right: 10px;
          padding: 0 8px;
          background-color: rgba(3, 18, 51, 0.4);
          position: absolute;
          text-align: center;
          border-radius: 10px;
        }

        .item_view-img {
          width: 100%;
        }

        .item_name {
          color: #fff;
          font-size: 12px;
          line-height: 24px;
          height: 24px;
          bottom: 0;
          width: 100%;
          background-color: rgba(3, 18, 51, 0.4);
          position: absolute;
          padding: 0 10px;
        }
      }
    }
  // }
</style>
